'use strict';

const app = new Vue({
  data: {
    description: '',
    pics: [],
    videos: [],
    study: [],
    diseases: [],
    cases: [],
    search: '',
    caseDetails: [],
    stage: '',
  },
  created() {
    this.getDisease();
  },
  methods: {
    getDisease() {
      const that = this;
      $.ajax({
        url: '../getCase',
        type: 'POST',
        data: {
          keyword: that.search,
        },
        dataType: 'json',
        success(data) {
          console.log(data);
          that.diseases = data;
          for (const i in that.diseases) {
            that.getCaseInfo(that.diseases[i].caseName, function(data) {
              console.log(data);
              that.cases.unshift(data);
            });
          }
        },
        error(data) {
          console.error(data);
        },
      });
    },
    getCaseInfo(name, cb) {
      console.log(name);
      const that = this;
      let id = 0;
      for (const i in this.diseases) {
        if (this.diseases[i].caseName === name) {
          id = this.diseases[i].id;
        }
      }

      $.ajax({
        url: '../getCaseInfo',
        type: 'GET',
        data: {
          id,
        },
        success(data) {
          if (cb != null) {
            cb(data);
          }
          that.caseDetails = data.caseDetail;
        },
        error(data) {
          console.error(data);
        },
      });
    },
    changeStage(stage) {
      for (const i in this.caseDetails) {
        if (this.caseDetails[i].stage === stage) {
          console.log(this.caseDetails[i]);
          const detail = this.caseDetails[i];
          this.description = detail.description;
          this.pics = detail.casePicture;
          this.videos = detail.caseVideo;
          this.study = detail.caseStudy;
        }
      }
    },
  },
}).$mount('#app');
